<template>
	<a-form :model="optionList" ref="formRef">
		<div class="com-list">
			<slot name="label">
				<p style="font-size: 12px; color: #666; margin: 4px 10px">选项</p>
			</slot>
			<VueDraggable v-model="optionList" :animation="150" handle=".handle">
				<a-form-item
					style="margin-bottom: 0"
					hide-asterisk
					hide-label
					validate-trigger="change"
					v-for="(item, index) in optionList"
					:field="`${index}.parm`"
					:rules="[{ required: true, message: '请填写名称' }]"
					:key="item.index"
				>
					<div class="list-item">
						<div class="list-label">
							<icon-drag-dot-vertical class="handle" style="cursor: pointer; margin-right: 6px" />
							<ComTypeSelect v-model="item.style" />
							<p v-if="pageName === 'assistField'">
								{{ item.name }}
							</p>
							<a-input v-else style="width: 100px; margin-left: 8px" size="mini" placeholder="名称" v-model="item.parm"></a-input>
						</div>
						<div class="list-value">
							<a-dropdown>
								<icon-more-vertical style="cursor: pointer" />
								<template #content>
									<a-doption :disabled="item.isKey" @click="delList(item.id || item.index)">删除</a-doption>
								</template>
							</a-dropdown>
						</div>
					</div>
				</a-form-item>
			</VueDraggable>
		</div>
	</a-form>
	<div class="add-btn">
		<slot name="add" :addList="addList">
			<p @click="addList(null)" class="add-text">
				<icon-plus />
				添加选项
			</p>
		</slot>
	</div>
</template>

<script setup lang="ts">
import ComTypeSelect from "@/components/ComTypeSelect.vue";
import { VueDraggable } from "vue-draggable-plus";
const formRef = ref({});
const props = defineProps({
	tabValue: {
		type: String
	},
	modelValue: {
		type: Array,
		default: () => []
	},
	form: {
		type: Object
	},
	pageName: {
		type: String
	}
});
const message = useMessage();
const emit = defineEmits(["update:modelValue"]);
const selectedKeys = ref([]);
const optionList: any = computed({
	get: () => {
		return props.modelValue;
	},
	set: (val) => {
		emit("update:modelValue", val);
	}
});
const delList = (idx) => {
	optionList.value = optionList.value.filter((i) => (i.id || i.index) !== idx);
	selectedKeys.value = [];
};
const addList = (data) => {
	if (data) {
		optionList.value.push({
			style: "success",
			index: Math.random(),
			isDef: false,
			id:data.id,
			name: data?.name,
			isKey: data?.isKey,
		});
	} else {
		optionList.value.push({
			index: Math.random(),
			style: "success",
			isDef: false
		});
	}
};

const validate = async () => {
	if (!optionList.value.length) {
		message.error("请添加选项");
		throw new Error("请添加选项");
	}
	const data = await formRef.value.validate();
	if (data) throw new Error("请填写必填项");
};

watch(
	() => props.form,
	(data) => {
		if (Array.isArray(data?.fieldValueList)) {
			optionList.value = data.fieldValueList;
		}
	},
	{ immediate: true }
);

defineExpose({
	validate,
	addList
});
</script>

<style scoped lang="scss">
.com-list {
	padding: 4px 24px;
}
.list-item {
	display: flex;
	justify-content: space-between;
	min-height: 32px;
	align-items: center;
	margin-bottom: 0;
	width: 100%;
	.list-label {
		display: flex;
		align-items: center;
		font-size: 13px;
		> p {
			color: #666;
			padding-left: 10px;
		}
	}
}
.add-btn {
	border-top: 1px solid #ebebeb;
	padding: 4px;
	font-size: 12px;
	color: #666;
	text-align: center;
	:deep(.add-text) {
		padding: 4px;
		border-radius: 6px;
		cursor: pointer;
		&:hover {
			background-color: #e6e6e6;
		}
	}
}
</style>
